<template>
  <div>
    <h3>http</h3>
    <hr />
    <button @click="getOne">axios-get请求</button>
    <br />
    <button @click="getTwo">axios-get请求</button>
    <hr />
    <button @click="postOne">axios-post请求1</button><br />
    上传图片<input type="file" @change="getImg"><br />
    <img :src="imgUrl" alt="" ><br>
    <button @click="postTwo">axios-post请求2</button>
  </div>
</template>

<script>
//引入axios
import axios from "axios";
import qs from "qs";
export default {
  data() {
    return {
        imgUrl:"",
        img:""
    };
  },
  mounted() {},
  methods: {
    //1.get-axios请求
    getOne() {
      axios({
        url: "https://api.aslegou.top/api/getcate", //请求资源地址
        method: "get", //请求方式
        params: {
          //请求参数
          type: 2, //分类类型
          cateid: 11, //分类id
          page: 1, //页码
          size: 5, //每次查询的条数
        },
      })
        .then((res) => console.log(res))
        .catch((err) => console.log(err));
    },
    getTwo() {
      axios
        .get("https://api.aslegou.top/api/getcate", {
          params: {
            type: 2, //分类类型
            cateid: 11, //分类id
            page: 1, //页码
            size: 5, //每次查询的条数
          },
        })
        .then((res) => console.log(res))
        .catch((err) => console.log(err));
    },
    //2.post-axios请求
    postOne() {
      //axios-post 无文件请求
      //2.1content-type: application/x-www-form-urlencoded 键值对格式
      /*  axios({
            url:"https://api.aslegou.top/api/login",
            method:"post",
            data:qs.stringify({phone:"13716052242",password:"111111"})
        })
        .then(res=>console.log(res))
        .catch(err=>console.log(err)) */

      //2.2post默认：content-type:application/json JSON对象格式
      axios({
        url: "https://api.aslegou.top/api/login",
        method: "post",
        data: {
          phone: "13716052242",
          password: "111111",
        },
      })
        .then((res) => console.log(res))
        .catch((err) => console.log(err));
    },
    //================axios-post 有文件提交请求==================
    postTwo() {
        //重组提交的数据格式
         let data = new FormData();
            data.append('pid',1)
            data.append('img',this.img)
            data.append('catename','测试分类000')
            data.append('status',0)
            // Content-Type: multipart/form-data 媒体流
            axios.post("http://api.aslegou.top/api/cateadd",data,{
                headers:{
                    // 传递token 必传
                    authorization:"eyJzZWMiOiJSU0EiLCJ0eXBlIjoiSldUIn0=.eyJuYmYiOjE2NDg0NzQxMDc3MDMsInVpZCI6IjZlN2RkOGQwLWYxYjQtMTFlYS04NGRhLTA3YTVkNmUyZjJmZSIsImxhc3RUaW1lIjo3MjAwMDAwMDAwMDAwfQ==.nyjIpyIc1M3FFvpvVxz6QwY3dH0TUKNw4EA6g74BDBqxARa5N4cvq8UvyCYKDIN5v/r5S+A0vFLw2lo5+2oz9aZPDHNb0E3l8O7KCKA1/bHLnzTjjMKE/aMJC30ejjpTKBdTvnd64r2119gdF6QstAS52fmrkGQCnjJFkaL1MR8h64r7C0LEeOcRw26IltRVuzyEQwZhRDdxJyrWObSFs2qYNgyVr4Bs8RJZQx3HRTeVAILFWJWhcFOPc+TC8xXfdS2m+a5brWU/YYtQZLmp+lzGesYh7l8VM8GuyQCKx0/fxJKSYCqu8ULrryy1e6lWhqpisaCE21a/dYHGUHeWWw=="
                }
            })
            .then(res=>console.log(res))
            .catch(err=>console.log(err))
    },
    //获取用户提交的图片
    getImg(e) {
    //console.log(e.target.files[0])
      //1.将图片资源对象转换成URL地址
      this.imgUrl = URL.createObjectURL(e.target.files[0]);
      //2.将获取到的图片对象资源存储
      this.img = e.target.files[0];
    },
  },
};
</script>

<style scoped>
</style>
